<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>装备</title>
        <link rel="stylesheet" type="text/css" href="/static/scoll/css/main.css">
        <link rel="stylesheet" type="text/css" href="/static/scoll/css/reset.css">
    <style>
        .ui-refresh{
            height: 300px;
        }
    </style>
    <link rel="stylesheet" href="/static/css/show/index.css"/>
</head>
<body>
<div class="content">
    <!--focus-->
    <section class="det-focus">
        <div id="focus" class="focus">
            <div class="hd mhd">
                <ul></ul>
            </div>
            <div class="bd">
                <ul>
                    {loop $homeRecGear $recGear}
                    <li><a href="{if $recGear['url']}{$recGear['url']}{else}#{/if}"><img src="{$recGear['img']}" class="recimg" /></a></li>
                    {/loop}
                </ul>
            </div>
        </div>
    </section>
    <!--main-->
    <div class="main">
        <div class="bar">
            <p class="nav">
                <span class="zorder bold" id="new">最新</span>
                <span class="zorder" id="hot">最热</span>
                <span class="zorder" id="best">精华</span>
                <span class="more bold">全部</span>
            </p>
            <p class="filter">
                <span class='ztype' id="all">全部</span>
                <span class='ztype' id="gearNews">装备快讯</span>
                <span class='ztype' id="gearSet">装备特辑</span>
                <span class='ztype' id="gearEval">装备评测</span>
                <span class='ztype' id="gearHot">最热装备</span>
                <span class='ztype' id="gearNew">新品收录</span>
            </p>
            <input type="hidden" id="type" name="type" value="gearNews" />
            <input type="hidden" id="order" name="order" value="new" />
            <input type="hidden" id="page" name="page" value="1" />
            <input type="hidden" id="pages" name="pages" value="0" />
        </div>   

        <!--list-->

            <div class="ui-refresh">
                    <div class="ui-refresh-up"></div>
   
                    <div class='list'>
                    <!--left area-->
                        <div class="view view_left">
                        </div>
                        <!--right area -->
                        <div class="view view_right">
                        </div>   
                     </div>  
                     <div style="clear:both"></div>     
                     <div class="ui-refresh-down"></div>  
                </div>
        </div>
    </div>
</div>
</body>
<script src="/static/js/TouchSlide.1.1.js"></script>
<script src="/static/js/zepto.1.0.min.js"></script> 
<script src="/static/js/zepto.refresh.min.js"></script>
<script>
(function ($) {
    var recimg_width = $('.recimg').width();
    $('.recimg').attr({'style': 'max-height:' + recimg_width * 0.48 + 'px'});

    TouchSlide({
        slideCell: "#focus",
        titCell: ".hd ul",
        mainCell: ".bd ul",
        effect: "left",
        interTime: 3000,
        autoPlay: true,
        autoPage: true
    });
    
    $('.nav .more').on('click', function () {
        var el = $('.filter');
        if (el.is(":hidden")) {
            el.css('display', 'block');
        } else {
            el.css('display', 'none');
        }
    });

    show_gears();
})(Zepto);

$(window).refresh({
    contentEl: '.list',
    minDistanceToRefresh: 1,
    maxDistanceToRefresh: 120,
    refreshCallback: function (complete) {        
        reset_page();
        reset_gear_box();
        show_gears();
        $('.preloader-refresh').hide();
    },
    loadingMoreCallback: function (complete) {
        incr_page($('#page').val() * 1);
        show_gears();
        complete();
    }
});

var listOffset = $('.ui-refresh').offset();
$('.preloader-refresh').attr({'style': 'top:' + listOffset.top + 'px;'});

var type, order, page, pages;
var orders = ['new', 'hot', 'best'];
var types = {
    'all': ['new', 'hot', 'best'],
    'gearNews': ['new', 'hot', 'best'],
    'gearSet': ['new', 'hot'],
    'gearEval': ['new', 'hot', 'best'],
    'gearHot': [],
    'gearNew': [],
};

$('.ztype').on('click', function() {
    var value = $(this).attr('id');
    $('.more').text($(this).text());
    $('.filter').hide();

    for(var i in orders) {
        if(types[value].indexOf(orders[i]) === -1) {
            $('#' + orders[i]).hide();
        } else {
            $('#' + orders[i]).show();
        }
    }

    $('#type').val(value);

    if(types[value].length == 0) {
        $('#order').val('');
        show_gears();
    } else {
        $('#' + types[value]).click();
    }
});

$('.zorder').on('click', function() {
    var value = $(this).attr('id');

    for(var i in orders) {
        if(value == orders[i]) {
            $('#' + orders[i]).addClass('bold');
        } else {
            $('#' + orders[i]).removeClass('bold');
        }
    }

    $('#order').val(value);
    show_gears();
});

function show_gears() {
    var gears = {};
    new_type = $('#type').val();
    new_order = $('#order').val();
    new_page = $('#page').val() * 1;
    new_page = new_page ? new_page : 1;
    new_pages = $('#pages').val() * 1;

    if((type && type != new_type) || (order && order != new_order)) {
        reset_gear_box();
        reset_page();
        new_page = 1;
        pages = 0;
    }

    type = new_type;
    order = new_order;
    page = new_page;

    if(page > 1 && page > new_pages) {
        $('.loading-bounce').text('没有更多了');
        return false;
    } else if(page == pages) {
        return false;
    }

    show_loading();

    $.ajax({
        'url': '/show/gearHome',
        'type': 'post',
        'data': {'more': 1, 'type': type, 'order': order, 'page': page},
        'async': false,
        'dataType': 'json',
        'success': function(res) {
            gears = res;
            set_pages(gears.pages);

            if(gears.length > 0 && gears.pages > page) {
                incr_page(page);
            }
        }
    });

    if(gears.data) {
        layout_gears(gears.data);
    }

    show_loading();
    setTimeout(function(){$('.preloader-loading-more').hide();}, 100);
}

function layout_gears(gears) {
    for(var k in gears) {
        i=gears[k];

        if(i.img == '') {
            i.img = '/static/images/default.png';
        }

        if(i.type == '2' || i.type == '3'){
             var tpl = '<div class="item view_item"><a href="joggers://news/'+i.relate_id+'">\
            <p class="item_thumb">\
                <img src="'+i.img+'?imageView2/2/w/300/h/300" alt=""/>\
            </p>\
            <div class="line"></div>\
            <p class="item_title">'+i.name+'</p>\
            <div class="line"></div>\
            <p class="item_description">'
               +i.shortDesc+'</p>\
            <div class="line"></div>\
            <p class="item_count_img">\
                <em class="love"></em><span>' + i.relate_content.loves + '</span>\
                <em class="comment"></em><span>' + i.relate_content.total_comment + '</span>\
            </p>\
            <div class="line"></div>\
            <div class="item_comment">\
                <div class="line"></div>\
                <div class="item_avatar">\
                    <img width="100%" src="' + i.relate_content.header + '" alt="" style="border-radius:20px">\
                </div>\
                <div class="item_info">\
                    <div class="item_name">' + i.relate_content.nickname + '</div>\
                    <div class="item_date">' + i.addTime + '</div>\
                </div>\
            </div></a></div>';
        }

        if(i.type == '0'){
            var score = '';
            for(var j = 0; j < i.score; j++){
                score += '<em style="width:17px;"></em>';
            }

            var tpl = '<div class="item view_item"><a href="joggers://gearShoe/'+i.gearId
               +'">\
            <p class="item_thumb"><img src="'+i.img+'?imageView2/2/w/300/h/300" alt=""/></p>\
            <div class="line"></div>\
            <p class="item_start">\
                <span class="r_star r_star_mini j_star_first">' + score + '</span>\
            </p>\
            <div class="line"></div>\
            <p class="item_title">'
                +i.name+'        </p>\
            <div class="line"></div>\
            <p class="item_description">'
               +i.shortDesc+'</p>\
            <div class="line"></div>\
            <p class="item_count_text">\
                <span><em>想要</em>('+i.likes+')</span>\
                <span><em>拥有</em>('+i.possess+')</span>\
            </p></a>\
            <div class="line"></div></div>';                    
        }

        if(i.type == '1'){
            var tpl=  '<div class="item view_item"><a href="joggers://gearSet/'+i.gearId+'">\
            <p class="item_thumb">\
                <img src="'+i.img+'" alt=""/>\
            </p>\
            <div class="line"></div>\
            <p class="item_title">'+i.name+'</p>\
            <div class="line"></div>\
            <p class="item_description">'
               +i.shortDesc+'</p>\
            <div class="line"></div>\
            <p class="item_count_img">\
                <em class="love"></em><span>' + i.likes + '</span>\
            </p></a>\
            <div class="line"></div></div>';
        }

        $('.view_' + get_view_location()).append(tpl);
   }     
}

//加载位置
function get_view_location() {
    var left_height = $('.view_left').height();
    var right_height = $('.view_right').height();

    return left_height - right_height > 0 ? 'right' : 'left';
}

function reset_page() {
    set_page(1);
    set_pages(0);
}

function incr_page(page) {
    set_page(page + 1);
}

function set_page(new_page) {
    page = new_page;
    $('#page').val(new_page);
}

function set_pages(new_pages) {
    pages = new_pages;
    $('#pages').val(new_pages);
}

function reset_gear_box() {
    $('.view_left, .view_right').html('');
}

function show_loading() {
    $('.preloader-loading-more').toggle();
}
</script>

{template 'show/web-footer'}